<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				DOM
					全称Document Object Model 文档对象模型
						js中通过DOM来对HTML文档进行操作。
					节点
						node——构成html文件的最基本单位
							文档节点	整个html
							元素节点	html中的HTML标签
							属性节点	元素的属性
							文本节点	html标签中的文本内容
								    nodename      nodetype     nodevalue
						文本节点		#document		 9			  null
						元素节点		标签名			 1			  null
						属性节点		属性名			 2			 属性值
						文本节点		#text			 3			文本内容
					浏览器已经为我们提供了文档节点对象，对象就是window属性
						可以在网页中使用，文档节点代表的是整个网页
						获取到button对象document
						var btn = document.getElementById("btn")；
				事件
					事件就是用户与浏览器之间的交互行为
						比如点击按钮，鼠标移动，关闭窗口....
					我们可以在事件对应的属性中设置一些js代码
						这样当事件触发时，这些代码会执行
				浏览器加载
					浏览器在加载界面时从上向下读，读到一行执行一行，如果将script写在上面
					在代码执行时界面还没加载，页面的对象DOM也没有加载
					将js代码编写到界面的下部，可以界面加载完成之后在执行js代码
					如果像js代码写在上方需要先写
						 window.onload = function(){
							 alert("hello")
						 }
					为window绑定一个onload事件
						该事件对象的相应函数会在界面加载完毕后自动执行
						这样可以确保我们的代码执行时，所以的DOW对象已经加载完毕
				DOM方法
					通过document对象调用
						1.getElementById()
							-通过id属性调用一个元素节点对象
						2.getElementsByTagName()
							-通过标签名获取一组元素节点对象
								会返回一个类数组对象
								innerHTML用于获取元素内部的html代码
									与自结束标签，这个属性没有意义
								如果像读取元素属性
									元素.属性
									例子
										thn.name   thn.innerHTML   thn.value
									特殊情况就是class，class本身就是一个保留字
										如果像读取时，使用classname
						3.getElementsByName()
							-通过name属性获取一组元素节点对象
					获取元素节点的子节点
						1.getElementsByTagName()
							返回当前节点的指定标签名后代节点
						2.childNodes
							代表当前节点的所有子节点
								会获取包括文本节点在内的所有子节点
								根据DOM标签间的空白也会当成一个节点
								注意：在IE8中，不会将空白文本当成子节点
							children
								代表当前节点的所有子元素
								子元素不包括空白
						3.firstChild
							代表当前节点的第一个子节点（包括空白）
								firstElenmentChild
								不包括空白，需要ie9以上的如果需要兼容尽量避免使用
						4.lastChild
							代表当前节点的最后一次子节点
					获取父节点和兄弟节点
						1.parentNode
							属性，表示当前父节点
							innerText
								-该属性可以获取元素内部的文本内容
								-它和innerHTML的区别就是没有HTML标签
						2.previousSibling
							属性，表示当前节点的前一个兄弟节点(可能获取空白)
								previousElementSibling获取前一个兄弟元素
								ie8及以下不能使用
						3.nextSibling
							属性，表示当前节点的后一个兄弟节点()
					获取body标签
						var body = document.getElementsByTagName("body")[0]
						var boby = document.boby
					获取html
						var html = document.documentElement;
					获取所有的元素
						var all = document.all;
						all = document.getElementsByTagName("*");
					根据class属性值查询一组元素节点对象
						var box1 = document.getElementsByClassName("box1")
						可以根据class属性值来获取一组元素节点对象，
							但是该方法不支持IE8级以下浏览器
					document.querySelector()
						需要一个选择器来作为参数，可以根据一个css选择器来查询元素节点对象
						var div = document.querySelector(".box1 div")
						查询class叫box1下面的所有div
						支持ie8浏览器
						使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个那么他值会返回第一个
					document.querySelectorAll()
						该方法和querySelector()用法一样，不过他会将符合的元素全部封装到一个类数组对象中
						即使符合条件的元素只有一个也会返回数组
			*/
		</script>
	</body>
</html>
